<script setup lang="ts">
// https://img2.baidu.com/it/u=60856268,584589370&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800
// https://img0.baidu.com/it/u=552300501,3499124980&fm=253&fmt=auto?w=684&h=684

import { ref } from 'vue'
const imgSrc = ref(
    'https://img0.baidu.com/it/u=999488746,15854658&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'
)

const imgTitle = ref('ikun')
const changeImg = () => {
    imgSrc.value = 'https://img0.baidu.com/it/u=552300501,3499124980&fm=253&fmt=auto?w=684&h=684'
    imgTitle.value = '只因你太美'
}

// 类的绑定
const isRed = ref(true)
</script>

<template>

    <!-- 推荐简写 :xxx 即可 -->
    <img :src="imgSrc" :title="imgTitle" alt="" />
    <!-- 用的不多了解即可 -->
    <!-- <img v-bind:src="imgSrc" alt="" /> -->
    <button @click="changeImg">切换图片地址</button>

    <!-- 动态的绑定 class -->
    <!-- <div class="box red border"></div> -->
    <!-- :class="{red:true,border:true}"
        key 绑定给组件的类名
        :之后的表达式，该类名是否生效 
   -->
    <div @click="isRed = !isRed" class="box" :class="{ red: isRed, border: true }"></div>

</template>
<style>
img {
    width: 200px;
}

.box {
    width: 100px;
    height: 100px;
    border: 1px red solid;
}

.red {
    background-color: red;
}

.border {
    border: 10px orange solid;
}
</style>